<template>
  <div class="kr-list-table-box" ref="krListTableBox">
    <div
      class="list-table-header"
      :class="listTableHeaderClass"
      v-show="searchLength != 0 || actionList.length != 0 || addDropdown.name"
      ref="listTableHeader"
    >
      <div
        v-if="searchLength != 0 && showSearch"
        class="list-table-search"
        :class="{ 'search--btnOverflow': actionBtnIfBlock }"
        ref="krListTableSearch"
      >
        <div
          v-for="(searchItem, index) in searchList"
          :key="index"
          class="list-table-search--item"
        >
          <label
            class="item-label"
            v-if="filterData[searchItem.model].enable && showSearchLabel"
            :title="searchItem.label"
            >{{ searchItem.label }}</label
          >
          <el-date-picker
            v-if="
              [
                'date',
                'week',
                'month',
                'year',
                'datetime',
                'daterange',
                'monthrange',
                'datetimerange',
              ].includes(searchItem.type) && filterData[searchItem.model].enable
            "
            class="item-input"
            v-model="searchForm[searchItem.model]"
            :title="searchForm[searchItem.model]"
            :type="searchItem.type"
            :disabled="searchItem.disabled"
            size="mini"
            @focus="focusInput(searchItem.model)"
            @blur="blurInput(searchItem.model)"
            @clear="clearInput(searchItem)"
            @change="changeInput(searchItem.model)"
            :placeholder="searchItem.placeholder || '选择日期'"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="searchItem.pickerOptions"
            clearable
            :format="searchItem.dateFormat || dateFrm(searchItem.type)"
            :value-format="dateFrm(searchItem.type)"
          ></el-date-picker>
          <el-select
            v-else-if="
              searchItem.type == 'select' && filterData[searchItem.model].enable
            "
            class="item-input"
            v-model="searchForm[searchItem.model]"
            :placeholder="searchItem.placeholder || '请选择'"
            size="mini"
            :multiple="searchItem.multiple"
            :collapse-tags="searchItem.collapseTags"
            :clearable="!searchItem.unclearable && !searchItem.multiple"
            :disabled="searchItem.disabled"
            :allow-create="searchItem.allowCreate"
            :filterable="searchItem.filterable"
            :remote="searchItem.remote"
            :remote-method="searchItem.remoteMethod"
            @focus="focusInput(searchItem.model)"
            @blur="blurInput(searchItem.model)"
            @clear="clearInput(searchItem)"
            @change="changeInput(searchItem.model)"
          >
            <el-option
              v-for="(selectOpItem, selectIndex) in searchItem.option"
              :key="'select' + selectIndex"
              :label="selectOpItem.label"
              :value="selectOpItem.value"
              :disabled="
                searchItem.disabledOption || selectOpItem.disabledOption
              "
            ></el-option>
          </el-select>
          <el-button
            v-else-if="searchItem.type == 'icon-button'"
            @click="searchItem.methods"
            circle
            :icon="searchItem.icon || 'el-icon-minus'"
            size="mini"
          ></el-button>
          <el-input
            class="item-input"
            @clear="clearInput(searchItem)"
            :clearable="
              searchItem.notClear ? false : searchItem.clearable || true
            "
            v-else-if="
              [
                'deviceClassify',
                'organization',
                'organizationAuth',
                'location',
                'userOnly',
                'dept',
                'device',
                'majorEquipment',
                'toolOrg',
              ].includes(searchItem.type)
            "
            size="mini"
            @change="(val) => inputChange(val, searchItem)"
            v-model="searchForm[searchItem.model]"
            :placeholder="searchItem.placeholder || '请选择'"
            :disabled="searchItem.notClear || searchItem.disabled"
          >
            <el-button
              slot="append"
              :icon="
                searchItem.type == 'majorEquipment' ||
                searchItem.type == 'toolOrg'
                  ? 'el-icon-s-tools'
                  : ['user', 'user-pdMember'].includes(searchItem.type)
                  ? 'el-icon-user'
                  : 'el-icon-location'
              "
              :disabled="searchItem.disabled || searchItem.readonly"
              @click="goSeleteOrgMember(searchItem, searchItem.type)"
            ></el-button>
          </el-input>
          <!-- <el-input
            class="item-input w100"
            :clearable="searchItem.clearable"
            v-else-if="
              [
                'userMultiple',
                'userMultiple-pdMember',
                'deptMultiple',
                'deptMultiple-pdOrg',
              ].includes(searchItem.type)
            "
            size="mini"
            type="textarea"
            rows="2"
            v-model="searchObj.queryData[searchItem.model]"
            :placeholder="searchItem.placeholder || '请选择'"
            :title="searchObj.queryData[searchItem.model]"
            @click.native="goSeleteOrgMember(searchItem, searchItem.type)"
            @change="(val) => inputChange(val, searchItem)"
            :disabled="searchItem.disabled"
            readonly
          ></el-input>-->
          <el-autocomplete
            v-else-if="searchItem.type === 'autocomplete'"
            size="mini"
            class="item-input"
            clearable
            v-model="searchForm[searchItem.model]"
            :fetch-suggestions="searchItem.querySearch"
            :placeholder="searchItem.placeholder || '请选择'"
          ></el-autocomplete>
          <el-input
            class="item-input"
            v-else-if="filterData[searchItem.model].enable"
            size="mini"
            :placeholder="searchItem.placeholder"
            v-model="searchForm[searchItem.model]"
            :disabled="searchItem.disabled"
            clearable
            @focus="focusInput(searchItem.model)"
            @blur="blurInput(searchItem.model)"
            @clear="clearInput(searchItem)"
            @change="changeInput(searchItem.model)"
          >
            <el-button
              slot="append"
              ref="searchBtn"
              v-if="searchItem.appendBtn"
              :icon="searchItem.appendBtn.icon || 'el-icon-search'"
              @click="
                searchItem.appendBtn.method
                  ? searchItem.appendBtn.method()
                  : null
              "
              >搜索</el-button
            >
          </el-input>
          <!-- v-if="index + 1 == searchList.length && showSearchBtn" -->
          <el-button
            v-if="index + 1 == searchList.length && showSearchBtn"
            type="warning"
            ref="searchBtn"
            icon="el-icon-search"
            class="search-btn"
            size="mini"
            @click="searchData(true)"
            >搜索</el-button
          >
        </div>
        <div v-if="showSearchLength > searchInputCount" class="underline"></div>
        <div
          class="search-up-down--btn"
          v-if="showSearchLength > searchInputCount && showSearchLabel"
          @click="thisShowAllSearch = !thisShowAllSearch"
        >
          <template v-if="thisShowAllSearch">
            <span class="icon-span--btn">
              <i class="el-icon-arrow-up"></i>
            </span>
            <span class="text-span">收起</span>
          </template>
          <template v-else>
            <span class="icon-span--btn">
              <i class="el-icon-arrow-down"></i>
            </span>
            <span class="text-span">展开</span>
          </template>
        </div>
        <!-- <div v-if="showSearchLength > searchInputCount" class="underline"></div> -->
      </div>
      <div
        v-if="showSearchLabel"
        class="table-search--action"
        :style="actionStyle"
        ref="tableSearchAction"
      >
        <div class="leftAction">
          <slot name="leftContent"></slot>
        </div>
        <slot name="actionBefore"></slot>
        <el-tooltip
          class="item"
          effect="dark"
          :content="addDropdown.content"
          :disabled="!addDropdown.disabled"
          :placement="addDropdown.placement || 'top'"
        >
          <el-dropdown
            size="small"
            trigger="click"
            :disabled="addDropdown.disabled"
            @command="addDropdown.method"
            v-if="addDropdown.method"
          >
            <el-button
              :disabled="addDropdown.disabled"
              class="table-action-btn"
              style="margin: 0 5px"
              :icon="addDropdown.icon || 'icon-xinjian'"
              size="mini"
              type="plain"
              >{{ addDropdown.name || "新建" }}</el-button
            >
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="dropdownItem"
                v-for="(dropdownItem, dropdownIndex) in dropdownList"
                :key="dropdownIndex"
                >{{ dropdownItem.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-tooltip>
        <template v-for="(actionItem, actionIndex) in actionList">
          <el-tooltip
            class="item"
            effect="dark"
            :content="actionItem.content"
            :disabled="!actionItem.disabled"
            :placement="actionItem.placement || 'top'"
            :key="actionIndex"
          >
            <div style="display: inline-block; margin: 0 5px">
              <el-button
                ref="actionBtn"
                :icon="actionItem.icon"
                class="table-action-btn"
                :type="actionItem.color || 'plain'"
                :disabled="actionItem.disabled"
                v-if="!actionItem.isHide"
                size="mini"
                @click="actionItem.method(actionItem.name)"
                >{{ actionItem.name }}</el-button
              >
            </div>
          </el-tooltip>
        </template>
        <slot name="actionMiddle"></slot>
        <span class="popoverActionBtn">
          <!-- 过滤器 -->
          <el-popover
            placement="bottom"
            width="300"
            trigger="click"
            v-if="showFilterBtn"
          >
            <div class="blockContent flexColumnNo">
              <div class="blockTop flexWrapNo">
                <div class="blockTitle">我的过滤器</div>
                <div class="closeBtn" @click="closeFilter">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <div class="itemContent">
                <template
                  v-for="(filterItem, filterIndex) in searchObj.searchArr"
                >
                  <div
                    class="blockItem flexColumnNo"
                    :key="filterIndex"
                    :draggable="true"
                    @dragstart="dragstart(filterItem)"
                    @dragenter="dragenter(filterItem, $event)"
                    @dragend="dragend(filterItem, $event)"
                    @dragover="dragover($event)"
                  >
                    <div class="blockItemTop flexWrapNo">
                      <div class="itemTopTitle">{{ filterItem.label }}</div>
                      <div class="itemTopBtn">
                        <el-switch
                          v-model="filterData[filterItem.model].enable"
                          active-color="#2c77f4"
                          @change="changeEnable"
                        ></el-switch>
                      </div>
                    </div>
                    <div
                      class="blockItemContent"
                      v-if="
                        filterData[filterItem.model].value ||
                        filterData[filterItem.model].name
                      "
                    >
                      <span v-if="isArry(filterData[filterItem.model].name)">
                        <span
                          class="contentValue"
                          v-for="(item, index) in filterData[filterItem.model]
                            .name"
                          :key="index"
                        >
                          {{
                            filterItem.formatter
                              ? filterItem.formatter(item)
                              : item
                          }}
                        </span>
                      </span>
                      <span
                        v-else-if="isArry(filterData[filterItem.model].value)"
                      >
                        <span
                          class="contentValue"
                          v-for="(item, index) in filterData[filterItem.model]
                            .value"
                          :key="index"
                        >
                          {{
                            filterItem.formatter
                              ? filterItem.formatter(item)
                              : item
                          }}
                        </span>
                      </span>
                      <span
                        class="contentValue"
                        v-else-if="filterData[filterItem.model].name"
                        >{{ filterData[filterItem.model].name }}</span
                      >
                      <span class="contentValue" v-else>
                        {{
                          filterItem.formatter
                            ? filterItem.formatter(
                                filterData[filterItem.model].value
                              )
                            : filterData[filterItem.model].name
                        }}
                      </span>
                    </div>
                  </div>
                </template>
              </div>
              <div class="bottomBtn flexWrapNo">
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  class="bottomBtnItem"
                  @click="resetFilter"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-circle-check"
                  class="bottomBtnItem"
                  @click="saveFilter"
                  >保存到这里</el-button
                >
              </div>
            </div>
            <el-button
              slot="reference"
              type="plain"
              size="mini"
              icon="icon-guolvqi"
              ref="filterBtn"
              >过滤器</el-button
            >
          </el-popover>
        </span>
        <span class="popoverActionBtn">
          <!-- 自定义列  -->
          <el-popover
            placement="bottom"
            width="250"
            trigger="click"
            v-if="showCustomBtn"
          >
            <div class="blockContent flexColumnNo">
              <div class="blockTop flexWrapNo">
                <div class="blockTitle">自定义列</div>
                <div class="closeBtn" @click="closeCustom">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <div class="checkNum">
                <span>已选字段：{{ customColumnData.length }}</span>
                <el-button
                  type="text"
                  v-if="showDefaultBtn"
                  @click="setDefaultConfig(customColumnData)"
                  >设为默认</el-button
                >
              </div>
              <div class="checkContent">
                <el-checkbox-group
                  v-model="customColumnData"
                  class="flexColumnNo"
                >
                  <template v-for="(columnrItem, columnIndex) in column">
                    <el-checkbox
                      :label="columnrItem.label"
                      :key="columnIndex"
                    ></el-checkbox>
                  </template>
                </el-checkbox-group>
              </div>

              <div class="bottomBtn flexWrapNo">
                <el-button
                  size="mini"
                  class="bottomBtnItem"
                  @click="deleteTableConfig"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  class="bottomBtnItem"
                  @click="submitCustom(customColumnData)"
                  >确定</el-button
                >
              </div>
            </div>
            <el-button
              slot="reference"
              type="plain"
              size="mini"
              icon="icon-zidingyilie"
              ref="customBtn"
              >自定义列</el-button
            >
          </el-popover>
        </span>
        <slot name="actionAfter"></slot>
      </div>
    </div>
    <!-- 表格主体 -->
    <div class="list-table-main" ref="listTableMain">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        v-if="showTable && computeTableHeight"
        border
        stripe
        :header-cell-class-name="handleHeaderClass"
        :header-cell-style="headerCellStyle"
        :highlight-current-row="highlightCurrentRow"
        :height="autoHeight || height || maxHeight || computeTableHeight"
        :cell-style="cellStyle || null"
        ref="krListTable"
        @expand-change="expandChange"
        @row-click="tableMethods.rowClick($event) || clickChange"
        @cell-click="
          (row, column, cell) =>
            tableMethods.cellClick
              ? tableMethods.cellClick(row, column, cell)
              : cellClick
        "
        @select="selectionChange"
        @sort-change="sortChange"
        @select-all="selectAll"
        @header-click="handleHeaderClick"
        :select-on-indeterminate="false"
        :row-key="rowKey"
        :row-class-name="rowStyle"
      >
        <el-table-column
          v-if="selectionShow"
          :selectable="(row, index) => selectableMethod(row, index) || null"
          align="center"
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column v-if="radioShow" align="center" label="-" width="46">
          <template slot-scope="scope">
            <div @click.stop>
              <el-radio
                :title="isDisabled(scope.row) ? disableTitle : ''"
                v-model="radioCheck"
                :label="scope.row[rowKey]"
                :disabled="isDisabled(scope.row)"
                @change="(i) => radioSelect(scope.row)"
                @click.native="radioClick"
              >
                <i></i>
              </el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showIndex || false"
          align="left"
          label="序号"
          width="55"
        >
          <template slot-scope="scope">{{
            searchForm.pageSize * (searchForm.page - 1) + scope.$index + 1
          }}</template>
        </el-table-column>
        <template v-if="type == 'expand'">
          <el-table-column type="expand" align="left">
            <template slot-scope="scope">
              <div class="expandTable">
                <el-table
                  :data="expandData"
                  max-height="240"
                  border
                  stripe
                  :header-cell-style="headerCellStyle"
                  v-loading="expandLoading"
                  ref="expandTable"
                  :key="scope.row.id"
                  :cell-style="expandCellStyle || null"
                >
                  <el-table-column
                    align="left"
                    type="index"
                    width="55"
                    label="序号"
                  ></el-table-column>
                  <template v-for="(item, index) in expandColumn">
                    <el-table-column
                      :label="item.label"
                      :align="item.textAlign ? item.textAlign : 'left'"
                      :width="item.width"
                      :prop="item.prop"
                      v-if="!item.hide"
                      :key="'_' + index"
                    >
                      <template slot-scope="scope">
                        <template v-if="item.type == 'button'">
                          <template
                            v-for="(btnItem, btnIndex) in item.buttonArr"
                          >
                            <el-button
                              :type="btnItem.type || 'text'"
                              size="small"
                              :key="btnIndex"
                              v-if="btnItem.isShow(scope.row)"
                              @click.stop="btnItem.methods(scope.row)"
                              :icon="btnItem.icon"
                              >{{ btnItem.text }}</el-button
                            >
                          </template>
                        </template>
                        <span
                          :style="item.textStyle(scope.row)"
                          v-else-if="item.textFormatter"
                          >{{ item.textFormatter(scope.row) }}</span
                        >
                        <span class="text-pre-wrap" v-else>
                          {{
                            item.formatter
                              ? item.formatter(scope.row)
                              : formatterNull(scope.row[scope.column.property])
                          }}
                        </span>
                      </template>
                    </el-table-column>
                  </template>
                </el-table>
              </div>
            </template>
          </el-table-column>
        </template>
        <template v-for="(item, index) in showCustomData">
          <el-table-column
            :label="item.label"
            :align="item.textAlign ? item.textAlign : 'left'"
            :width="item.width"
            :prop="item.prop"
            :min-width="item.minWidth"
            :key="index"
            v-if="!item.hide"
            :fixed="item.fixed || null"
            :sortable="item.sortable"
          >
            <template v-if="item.subColumn">
              <template v-for="(subItem, subIndex) in item.subColumn">
                <el-table-column
                  :label="subItem.label"
                  :align="subItem.textAlign ? subItem.textAlign : 'left'"
                  :width="subItem.width"
                  :prop="subItem.prop"
                  :key="subIndex"
                  v-if="!subItem.hide"
                  :fixed="subItem.fixed || null"
                >
                  <template slot-scope="scope">
                    <template v-if="subItem.type == 'button'">
                      <template
                        v-for="(btnItem, btnIndex) in subItem.buttonArr"
                      >
                        <el-button
                          :type="btnItem.type || 'text'"
                          size="small"
                          :key="btnIndex"
                          v-if="btnItem.isShow(scope.row)"
                          @click.stop="btnItem.methods(scope.row)"
                          :icon="btnItem.icon"
                          >{{ btnItem.text }}</el-button
                        >
                      </template>
                    </template>
                    <template v-else>
                      <span
                        :style="subItem.textStyle(scope.row)"
                        v-if="subItem.textFormatter"
                        >{{ subItem.textFormatter(scope.row) }}</span
                      >

                      <el-tooltip
                        effect="dark"
                        v-if="subItem.showTooltip"
                        placement="top"
                        :content="
                          subItem.formatter
                            ? subItem.formatter(scope.row)
                            : subItem.text
                            ? formatterNull(scope.row[subItem.text])
                            : formatterNull(scope.row[scope.column.property])
                        "
                      >
                        <span
                          class="table-cloumn__span--tooltip w100 oneLine"
                          style="display: inline-block"
                        >
                          {{
                            subItem.formatter
                              ? subItem.formatter(scope.row)
                              : subItem.text
                              ? formatterNull(scope.row[subItem.text])
                              : formatterNull(scope.row[scope.column.property])
                          }}
                        </span>
                      </el-tooltip>
                      <span
                        v-else-if="subItem.scopeType == 'formate'"
                        v-html="
                          subItem.method(scope.row)
                            ? subItem.method(scope.row)
                            : emptyStyle
                        "
                      ></span>
                      <span v-else>
                        {{
                          subItem.formatter
                            ? subItem.formatter(scope.row)
                            : formatterNull(scope.row[scope.column.property])
                        }}
                      </span>
                    </template>
                  </template>
                </el-table-column>
              </template>
            </template>
            <template slot-scope="scope">
              <template v-if="item.type == 'button'">
                <template v-for="(btnItem, btnIndex) in item.buttonArr">
                  <el-tooltip
                    v-if="btnItem.isShow(scope.row)"
                    class="item"
                    effect="dark"
                    :content="btnItem.content"
                    :disabled="!btnItem.disabled"
                    :placement="btnItem.placement || 'top'"
                    :key="btnIndex"
                  >
                    <div style="display: inline-block; margin: 0 5px">
                      <el-button
                        :type="btnItem.type || 'text'"
                        :size="btnItem.size || 'small'"
                        :key="btnIndex"
                        :disabled="btnItem.disabled"
                        v-if="btnItem.isShow(scope.row)"
                        @click.stop="btnItem.methods(scope.row, scope.$index)"
                        :icon="btnItem.icon"
                      >
                        {{ btnItem.text ? btnItem.text : scope.row[item.prop] }}
                      </el-button>
                    </div>
                  </el-tooltip>
                </template>
              </template>
              <template v-else-if="item.type == 'textButton'">
                <el-button
                  type="text"
                  size="small"
                  :title="item.title"
                  @click="
                    item.method ? item.method(scope.row, scope.$index) : null
                  "
                  >{{ scope.row[item.prop] }}</el-button
                >
              </template>
              <template v-else-if="item.type == 'textButtonList'">
                <template v-for="(btnItem, btnIndex) in scope.row[item.prop]">
                  <el-button
                    :key="btnIndex"
                    type="text"
                    size="small"
                    :title="item.title"
                    @click="
                      item.method ? item.method(btnItem, scope.$index) : null
                    "
                    >{{ btnItem ? btnItem[item.btnProp] : "-" }}</el-button
                  >
                </template>
              </template>
              <template v-else>
                <span
                  :style="item.textStyle(scope.row)"
                  v-if="item.textFormatter"
                  >{{ item.textFormatter(scope.row) }}</span
                >
                <span
                  v-else-if="
                    singleRow &&
                    !item.showTooltip &&
                    item.scopeType != 'formate'
                  "
                  class="table-cloumn__span--tooltip oneLine"
                  style="display: inline-block"
                >
                  {{
                    item.formatter
                      ? item.formatter(scope.row)
                      : item.text
                      ? formatterNull(scope.row[item.text])
                      : formatterNull(scope.row[scope.column.property])
                  }}
                </span>
                <el-tooltip
                  effect="dark"
                  v-else-if="item.showTooltip"
                  placement="top"
                  :content="
                    item.formatter
                      ? item.formatter(scope.row)
                      : item.text
                      ? formatterNull(scope.row[item.text])
                      : formatterNull(scope.row[scope.column.property])
                  "
                >
                  <span
                    class="table-cloumn__span--tooltip oneLine"
                    style="display: inline-block"
                  >
                    {{
                      item.formatter
                        ? item.formatter(scope.row)
                        : item.text
                        ? formatterNull(scope.row[item.text])
                        : formatterNull(scope.row[scope.column.property])
                    }}
                  </span>
                </el-tooltip>
                <span
                  v-else-if="item.scopeType == 'formate'"
                  v-html="
                    item.method(scope.row) ? item.method(scope.row) : emptyStyle
                  "
                ></span>
                <span v-else class="text-pre-wrap">
                  {{
                    item.formatter
                      ? item.formatter(scope.row)
                      : formatterNull(scope.row[scope.column.property])
                  }}
                </span>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div v-if="showPagination" class="kr-table-pagination">
        <el-pagination
          :small="pageSmall"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="paginationObj.pageSizes"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber"
        ></el-pagination>
      </div>
    </div>
    <dialogPublic
      title="信息选择"
      :show.sync="showUser"
      @doSubmit="addSeleteMember"
      @doClose="() => (showUser = false)"
      :fullscreen="true"
      appendTobody
    >
      <newMemberSelect
        ref="newMember"
        v-if="showUser"
        :seleteSetting="orgMemberSelect"
      ></newMemberSelect>
    </dialogPublic>

    <dialogPublic
      title="信息选择"
      :show.sync="showTool"
      @doSubmit="addSeleteMember"
      @doClose="() => (showTool = false)"
      :fullscreen="true"
      appendTobody
    >
      <toolOrgSelect
        ref="newMember"
        v-if="showTool"
        :seleteSetting="orgMemberSelect"
      ></toolOrgSelect>
    </dialogPublic>

    <dialogPublic
      title="信息选择"
      :show.sync="showDevice"
      @doSubmit="addSeleteMember"
      @doClose="() => (showDevice = false)"
      :fullscreen="true"
      appendTobody
    >
      <equipmentSelect
        ref="newMember"
        v-if="showDevice"
        :seleteSetting="orgMemberSelect"
      ></equipmentSelect>
    </dialogPublic>
    <dialogPublic
      :title="'选择主要设备'"
      height="600px"
      width="90%"
      :show.sync="showEquipment"
      @doSubmit="seleteEquipment"
      @doClose="() => (showEquipment = false)"
    >
      <majorEquipment
        v-if="showEquipment"
        ref="majorEquipment"
        :seleteSetting="majorEquipment"
      ></majorEquipment>
    </dialogPublic>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {
  getTableConfigApi, //获取表格过滤器数据
  setTableConfigApi, //更新表格过滤器数据
  deleteTableConfigApi, //删除表格过滤器数据
} from "@/api/common";
export default {
  components: {},
  props: {
    // 显示表格
    showTable: {
      type: Boolean,
      default: true,
    },
    // 显示搜索框前文本
    showSearchLabel: {
      type: Boolean,
      default: true,
    },
    // 显示搜索框按钮
    showSearchBtn: {
      type: Boolean,
      default: true,
    },
    showAllSearch: {
      type: Boolean,
      default: false,
    },
    searchObj: Object,
    // 下拉
    addDropdown: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 单行显示
    singleRow: {
      type: Boolean,
      default: false,
    },
    height: [Number, String], //表格高度
    maxHeight: [Number, String], //最大高度
    //是否自动高度，即不设置
    autoHeight: {
      type: Boolean,
      default: false,
    },
    //显示序号
    showIndex: {
      type: Boolean,
      default: true,
    },
    //显示过滤器按钮
    showFilterBtn: {
      type: Boolean,
      default: true,
    },
    pageSmall: {
      type: Boolean,
      default: false,
    },
    //显示自定义列按钮
    showCustomBtn: {
      type: Boolean,
      default: true,
    },
    //值为空时
    emptyStyle: {
      type: String,
      default: "-",
    },
    // 新增下拉列表
    dropdownList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //操作按钮列表
    actionList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // //用户自定义表格栏位数组
    // userCustomData: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // },
    //页面标识
    pageConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //table没有竖边框
    noBorderRight: {
      type: Boolean,
      default: false,
    },
    //显示分页
    showPagination: {
      type: Boolean,
      default: true,
    },
    //分页对象
    paginationObj: {
      type: Object,
      default: () => {
        return { pageSizes: [15, 30, 50, 100] };
      },
    },
    //是否高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    //表格样式
    cellStyle: Function,
    //展开的表格样式
    expandCellStyle: Function,
    //表格数据
    tableData: Array,
    //合并行或列
    arraySpanMethod: Function,
    //表格总数
    totalNumber: {
      type: Number,
      default: 0,
    },
    //展开的表格数据
    expandData: Array,
    //表格栏位数组
    column: Array,
    //展开的表格栏位数组
    expandColumn: Array,
    //表格类型
    type: String,
    //是否默认条件优先
    defaultQueryFirst: {
      type: Boolean,
      default: false,
    },
    //是否显示选择框
    selectionShow: {
      type: Boolean,
      default: false,
    },
    //是否显示单选
    radioShow: {
      type: Boolean,
      default: false,
    },
    //判断是否可以选择
    selectableMethod: {
      type: Function,
      default: () => {
        return true;
      },
    },
    isDefaultSort: {
      type: Boolean,
      default: true,
    },
    defaultSort: {
      type: String,
      default: "createTime",
    },
    defaultSortAsc: {
      type: Boolean,
      default: false,
    },
    //表格函数对象
    tableMethods: Object,
    account: {
      type: Function,
      default: (row) => {
        return row.account;
      },
    },
    //单选框书否禁用
    isDisabled: {
      type: Function,
      default: (row) => {
        return false;
      },
    },
    disableTitle: {
      type: String,
      default: "",
    },
    otherInfo: Object,
    rowKey: {
      type: String,
      default: "id",
    },
  },
  data() {
    return {
      radioCheck: null,
      radioCheckRow: null,
      showMember: false,
      showUser: false,
      showDevice: false,
      showEquipment: false,
      showSearch: true,
      showTool: false,
      defaultQuery: {},
      orgMemberSelect: {},
      majorEquipment: {},
      userConfig: {},
      defaultColumnObj: {},
      columnObj: {}, //获取的用户的列配置
      filterObj: {}, //获取的用户的过滤器配置
      defaultFilterData: {}, //过滤器默认数据
      showblockContent: false, //展示过滤器
      showCustomBlock: false, //展示自定义列
      filterBtn: true, //过滤器的显示和隐藏
      filterData: {},
      showCustomData: [], //展示的列
      customColumnData: [], //用户自定义列名称的数组
      userCustomData: [],
      defaultCustom: [],
      thisShowAllSearch: false, //是否显示完全部的按钮
      searchInputCount: 3, //一行最多显示的输入框数量
      searchForm: {
        //搜索的表单数据
        page: 1,
        pageSize: 15,
      },
      //操作按钮是否独立一行
      actionBtnIfBlock: false,
      //操作按钮的宽度
      actionWidth: 0,
      //整个表格宽度
      tableBoxWidth: 0,
      //表格loading
      expandLoading: false,
      //当前选中的行
      currentrow: {},
      //计算的高度
      computeTableHeight: 0,
      //排序字段
      searchOrder: [],
    };
  },
  computed: {
    //查询的输入框列表
    searchList() {
      //如果显示全部
      let arr = [];
      if (this.showFilterBtn) {
        arr = this.showSearchArr;
      } else {
        arr = this.searchObj.searchArr;
      }
      if (this.thisShowAllSearch) {
        return arr;
      } else {
        return arr.filter((i, index) => index < this.searchInputCount);
      }
    },
    showSearchLength() {
      if (this.showFilterBtn) {
        return this.showSearchArr.length;
      } else {
        return this.searchObj.searchArr.length;
      }
    },
    //当前显示的条件
    showSearchArr() {
      let showNameArr = [];
      let showList = [];
      let searchArr = this.searchObj.searchArr;
      for (let j in this.filterData) {
        if (this.filterData[j].enable) {
          showNameArr.push(j);
        }
      }
      searchArr.map((i) => {
        if (showNameArr.includes(i.model)) {
          showList.push(i);
        }
      });
      return showList;
    },
    //表格头部样式
    headerCellStyle() {
      let style = {
        background: "#fafafa",
        color: "#333333",
        fontWeight: "bold",
        borderBottom: "1px solid #ebebeb",
        padding: 0,
      };
      if (this.noBorderRight) {
        style.borderRight = "none";
      }
      return style;
    },
    //头部样式,暂不用,已用class
    searchHeaderStyle() {
      //新增按钮和输入框不在一行的时候
      if (this.actionBtnIfBlock) {
        return {
          display: "block",
          position: "relative",
        };
      } else {
        return {
          display: "flex",
          position: "relative",
          justifyContent: "space-between",
          marginBottom: "16px",
          borderBottom: "1px solid #ccc",
        };
      }
    },
    //头部样式
    listTableHeaderClass() {
      return this.actionBtnIfBlock
        ? "header--btnOverflow"
        : "header--btnNoOver";
    },
    //搜索框样式,暂不用
    searchDivStyle() {
      //新增按钮和输入框不在一行的时候
      if (this.actionBtnIfBlock) {
        return {
          marginBottom: "16px",
          borderBottom: "1px solid #ccc",
          position: "relative",
        };
      } else {
        return {};
      }
    },
    searchLength() {
      let num = 0;
      for (let i in this.filterData) {
        if (this.filterData[i].enable == true) {
          num++;
        }
      }
      return num;
    },
    //按钮样式
    actionStyle() {
      let lenNum = this.searchLength;
      // const allListLen = this.searchObj.searchArr.length,
      const allListLen = lenNum,
        searchInputCount = this.searchInputCount,
        actionWidth = this.actionWidth,
        tableBoxWidth = this.tableBoxWidth;
      /* if (this.thisShowAllSearch && allListLen > searchInputCount) {
        //如果为展开，且剩余宽度可以支撑按钮的宽度，则按钮往上挤
        if (
          tableBoxWidth -
            (searchInputCount - (allListLen % searchInputCount)) * 320 +
            50 +
            73 >
          actionWidth
        ) {
          return { position: "absolute", bottom: "10px", right: "0px" };
        }
      } */
      return {
        paddingBottom: "10px",
      };
    },
    showDefaultBtn() {
      return this.$store.getters.userInfo.account == "gaoyuan";
    },
  },
  watch: {
    "searchObj.queryData": {
      handler(val) {
        this.searchForm = Object.assign({}, this.searchForm, val);
      },
      deep: true,
    },
    "searchObj.searchArr": {
      handler(val) {
        this.init();
      },
      deep: true,
    },
    //赋值展开的data后取消loading
    expandData: {
      handler(val) {
        this.expandLoading = false;
      },
      deep: true,
    },
    tableData: {
      handler(val) {
        this.$emit("defaultSelection");
      },
    },
    thisShowAllSearch() {
      this.adjustSize();
    },
    pageConfig: {
      handler(val) {
        this.getTableConfig();
      },
      deep: true,
    },
    //监听列的变化
    column: {
      handler(val) {
        this.initTableColumn();
      },
      deep: true,
    },
  },
  created() {
    this.setDefaultFilterData();
    if (this.showSearchLabel) {
      this.filterData = this.setfilterData();
    } else {
      this.thisShowAllSearch = true;
    }
    this.init();
  },
  mounted() {
    this.adjustSize();
    window.addEventListener("resize", this.adjustSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.adjustSize);
  },
  methods: {
    init() {
      //如果显示全部输入框
      this.showAllSearch && (this.thisShowAllSearch = this.showAllSearch);
      this.initTableColumn();
      //初始化过滤器
      if (!this.showSearchLabel) {
        this.filterData = this.setfilterData();
      }
      //初始化搜索表单
      this.searchForm = Object.assign(
        {},
        this.searchForm,
        this.searchObj.queryData
      );
      this.defaultQuery = Object.assign(
        {},
        this.searchForm,
        this.searchObj.queryData
      );
    },
    //行样式
    rowStyle({ row }) {
      if (this.tableMethods.rowClick.toString().includes("{}")) {
        return `noClickedRowHover`;
      } else {
        return `clickedRowHover`;
      }
    },
    //设置过滤器默认值
    setDefaultFilterData() {
      let queryData = this.searchObj.queryData;
      let newQuery = {};
      for (let i in queryData) {
        if (!["page", "pageSize"].includes(i)) {
          newQuery[i] = queryData[i];
        }
      }
      this.defaultFilterData = {};
      if (!this.isEmptyObj(newQuery)) {
        for (let i in newQuery) {
          this.defaultFilterData[i] = {
            value: newQuery[i] || null,
            enable: true,
          };
        }
      }
    },
    initSearch() {
      if (this.isEmptyObj(this.filterFormData)) {
        //查询到的过滤器的值为空
        if (!this.isEmptyObj(this.defaultFilterData)) {
          //过滤器默认值不为空
          this.filterData = Object.assign(
            this.filterData,
            this.defaultFilterData
          );
          let dataDefault = this.filterDataChange(this.defaultFilterData);
          this.searchForm = Object.assign({}, this.searchForm, dataDefault);
        }
        this.searchData();
      } else {
        //查询到的过滤器的值不为空
        // for (const key in this.filterData) {
        //   if (Object.hasOwnProperty.call(this.filterData, key)) {
        //     this.filterData[key].value = this.filterFormData[key].value;
        //     this.filterData[key].name = this.filterFormData[key].name;
        //     this.filterData[key].enable = this.filterFormData[key].enable;
        //   }
        // }
        this.filterData = Object.assign(this.filterData, this.filterFormData);
        let dataFilter = this.filterDataChange(this.filterFormData);
        if (
          !(
            this.filterFormData == undefined ||
            this.isEmptyObj(this.filterFormData)
          )
        ) {
          //自定义过滤器有值时
          let key = Object.keys(dataFilter);
          //调整查询条件的展示顺序
          let keyObj = {};
          let queryArr = [];
          let searchArr = this.searchObj.searchArr;
          searchArr.map((i) => {
            keyObj[i.model] = i;
          });
          key.map((i) => {
            if (keyObj[i]) {
              queryArr.push(keyObj[i]);
            }
          });
          this.searchObj.searchArr = queryArr;
        }
        // 设置查询条件的值
        if (this.defaultQueryFirst) {
          // 默认条件优先
          this.searchForm = Object.assign({}, dataFilter, this.searchForm);
        } else {
          // 过滤器条件优先
          this.searchForm = Object.assign({}, this.searchForm, dataFilter);
        }
        this.searchData();
      }
    },
    //设置表格配置
    setTableConfig(type, def) {
      let form = {
        config: "",
        type: type,
        id: "",
        page: this.pageConfig.pageCode || "",
        userId: this.pageConfig.userId || "",
      };
      def && (form.userId = "default");
      if (type == "filter") {
        form.id = this.filterObj.id;
        let sortArr = this.searchObj.searchArr;
        let filterObj = {};
        // 根据拖拽后的顺序来排列数据
        sortArr.map((i) => {
          /* 对下拉框的值做转中文处理 */
          if (i.type == "select") {
            let data = this.filterData[i.model];
            let option = i.option;
            if (i.multiple) {
              //多选
              let nameArr = [];
              if (data.value) {
                data.value.map((key) => {
                  for (let j in option) {
                    if (option[j].value == key) {
                      nameArr.push(option[j].label);
                      break;
                    }
                  }
                });
              }
              this.filterData[i.model].name = nameArr;
            } else {
              //单选
              for (let j in option) {
                if (option[j].value == data.value) {
                  this.filterData[i.model].name = option[j].label;
                  break;
                }
              }
            }
          }
          if (i.idsStr) {
            //存在ID时
            this.filterData[i.model].name = this.searchForm[i.model];
            this.filterData[i.model].value = this.searchForm[i.idsStr];
          }
          filterObj[i.model] = this.filterData[i.model];
        });
        form.config = JSON.stringify(filterObj);
      } else if (type == "column") {
        form.id = def ? this.defaultColumnObj.id : this.columnObj.id;
        form.config = JSON.stringify(this.userCustomData); //userCustomData存储的只保留了名字的数组
      }
      if (!form.page == "") {
        setTableConfigApi(form)
          .then((res) => {
            this.$message.success("操作成功！");
            this.getTableConfig();
          })
          .catch((e) => {
            this.$message.warning("保存失败！");
          });
      } else {
        this.$message.warning("未设置页面标识，数据未保存到数据库！");
      }
    },
    //获取表格配置
    getTableConfig() {
      if (!this.isEmptyObj(this.pageConfig)) {
        let form = {
          page: this.pageConfig.pageCode || "",
          userId: this.pageConfig.userId,
        };
        getTableConfigApi(form).then((res) => {
          let data = JSON.parse(JSON.stringify(res.data));
          this.userConfig = data;
          if (data.length == 0) {
            this.filterFormData = {};
            this.userCustomData = {};
          } else {
            data.map((i) => {
              if (i.type == "filter") {
                // this.filterData = JSON.parse(i.config);
                this.filterObj = i;
                this.filterFormData = JSON.parse(i.config) || {};
              } else if (i.type == "column") {
                if (i.userId == "default") {
                  this.defaultColumnObj = i;
                  if (JSON.stringify(this.columnObj) == "{}"||data.length==1) {
                    this.userCustomData = JSON.parse(i.config) || {};
                  }
                } else {
                  this.columnObj = i;
                  this.userCustomData = JSON.parse(i.config) || {};
                }
              }
            });
          }
          this.initTableColumn();
          this.initSearch();
        });
      }
    },

    //初始化表格列
    initTableColumn() {
      if (this.showCustomBtn) {
        if (this.userCustomData.length) {
          this.customColumnData = this.userCustomData;
        } else {
          this.customColumnData = [];
          this.column.map((i) => {
            this.customColumnData.push(i.label);
          });
        }
        this.setCustomData(this.customColumnData);
      } else {
        this.showCustomData = this.column;
      }
    },
    //判断对象是否为空
    isEmptyObj(obj) {
      return JSON.stringify(obj) == "{}";
    },
    //判断是否是数组
    isArry(data) {
      return data instanceof Array;
    },
    //获取焦点时
    focusInput(model) {
      this.$emit("focusInput", model, this.searchForm);
    },
    //失去焦点时
    blurInput(model) {
      this.$emit("blurInput", model, this.searchForm);
    },
    //点击清空时(清空输入框)
    clearInput(item) {
      this.$set(this.searchForm, item.model, null);
      if (item.idsStr) {
        this.$set(this.searchForm, item.idsStr, null);
      }
    },
    //输入框失去焦点或用户按下回车时触发
    changeInput(model) {
      this.$emit("changeInput", model, this.searchForm);
      //多选select控件需执行强制渲染
      this.$forceUpdate();
    },
    //日期数据处理
    dateFrm(type) {
      if (type === "date" || type === "daterange") {
        return "yyyy-MM-dd";
      } else if (type == "datetime" || type === "datetimerange") {
        return "yyyy-MM-dd HH:mm";
      } else if (type == "month" || type === "monthrange") {
        return "yyyy-MM";
      } else if (type == "year") {
        return "yyyy";
      } else {
        return "";
      }
    },
    //调整尺寸
    async adjustSize() {
      this.setSearchCount();
      await this.$nextTick();
      this.setTableHeight();
    },
    /**设置表格宽度问题 */
    setSearchCount() {
      //宽度减去按钮的宽度
      /* let searchBtnWidth =this.searchObj.searchArr.length != 0? this.$refs.searchBtn[0].$el.offsetWidth: 0; */
      let searchBtnWidth =
        this.searchLength != 0
          ? this.showSearchBtn
            ? this.$refs.searchBtn[0].$el.offsetWidth
            : 0
          : 0;
      let searchWidth = this.$refs.krListTableBox.offsetWidth - searchBtnWidth;
      this.tableBoxWidth = searchWidth;

      //如果不展开，则第一行得减除搜索按钮的宽度
      // if (!this.thisShowAllSearch) {
      //   searchWidth -= 50;
      // }
      let count = parseInt(searchWidth / 340);
      if (this.searchObj.searchArr.length >= count) {
        //如果搜索条件大于一行可以放的最大个数，则要减去第一行最后一个带按钮的搜索条件框的宽度
        this.searchInputCount = parseInt((searchWidth - 440) / 340) + 1;
      } else {
        this.searchInputCount = count;
      }
      //计算所有按钮的宽度
      let actionWidth = 10; //165\205
      if (this.showCustomBtn && this.showCustomBtn) {
        //同时展示过滤器跟自定义列
        actionWidth = 205;
      } else if (this.showCustomBtn || this.showCustomBtn) {
        //只展示过滤器或者自定义列中的一个
        actionWidth = 105;
      }
      let actionBtnRefs = this.$refs.actionBtn;
      if (actionBtnRefs) {
        if (actionBtnRefs.length) {
          actionBtnRefs.map((i, index) => {
            actionWidth += i.$el.clientWidth;
            //多个按钮时，会有10px边距
            if (index > 0) {
              actionWidth += 10;
            }
          });
        } else {
          actionWidth = actionBtnRefs.clientWidth;
        }
      }
      this.actionWidth = actionWidth;
      this.actionBtnIfBlock = true;
      //除去输入框+搜索按钮及边距，如果剩余宽度不足，则往下放按钮searchList.length
      /*   if (
        searchWidth - (this.searchLength * 345 + searchBtnWidth) - actionWidth <
        0
      ) {
        this.actionBtnIfBlock = true;
      } else {
        this.actionBtnIfBlock = false;
      } */
    },
    /**设置表格最大高度 */
    setTableHeight() {
      let height = this.height,
        maxHeight = this.maxHeight,
        autoHeight = this.autoHeight;
      if (!height && !maxHeight && !autoHeight) {
        let parentH = this.$refs.krListTableBox.parentElement.clientHeight; //表格父级高度
        let searchH = this.$refs.listTableHeader.clientHeight; //表格搜索框高度
        let headHeight = document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0];
        let bodyHeight = document.getElementsByClassName(
          "el-table__body-wrapper"
        )[0];
        parentH = parentH - searchH - 10 - 40; //边距、页码高度、预留边距
        this.computeTableHeight = parentH < 300 ? 300 : parentH;
        if (bodyHeight && this.showCustomBtn) {
          bodyHeight.style.height =
            this.computeTableHeight - headHeight.clientHeight + "px";
        }
      }
    },
    /**判断空值默认- */
    formatterNull(text) {
      if (text === null || text === undefined || text === "") {
        return "-";
      } else {
        return text;
      }
    },
    //查询数据
    searchData(noFirst, resetPage = true) {
      resetPage && (this.searchForm.page = 1);
      this.searchOrde = [];
      let filter = JSON.parse(JSON.stringify(this.filterData));
      //去掉没有启用的查询条件
      for (let i in filter) {
        if (!filter[i].enable) {
          delete this.searchForm[i];
        }
      }
      //清除排序状态
      if (noFirst) {
        //首次查询不需要清除排序
        this.$refs.krListTable.clearSort();
      } else {
        //首次查询时添加默认排序条件
        if (this.isDefaultSort && this.searchOrder.length == 0) {
          let form = {
            column: this.defaultSort ? this.defaultSort : "createTime",
            asc: this.defaultSortAsc ? this.defaultSortAsc : false,
          };
          this.searchOrder.push(form);
        }
      }
      this.searchObj.searchMethod(this.searchForm, this.searchOrder);
    },
    //表格页显示数量改变
    handleSizeChange(val) {
      this.searchForm.page = 1;
      this.searchForm.pageSize = val;
      this.searchObj.searchMethod(this.searchForm, this.searchOrder);
    },
    //表格页码改变
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.searchObj.searchMethod(this.searchForm, this.searchOrder);
    },
    //勾选表格数据
    selectionChange(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1;
      this.$emit("selectChange", selected, row);
    },
    rowClickSelect(row) {
      let selection = this.$refs.krListTable.selection;
      let isSelect = false;
      if (selection.length > 0) {
        for (let i in selection) {
          if (selection[i].id == row.id) {
            isSelect = true;
            break;
          }
        }
      }
      if (isSelect) {
        this.selectionCalce(row);
      } else {
        this.selectioned(row);
      }
    },
    //默认勾选
    selectioned(row) {
      this.$nextTick(() => {
        this.$refs.krListTable.toggleRowSelection(row, true);
      });
    },
    //取消勾选
    selectionCalce(row) {
      this.$refs.krListTable.toggleRowSelection(row, false);
    },
    setSearchItem(model) {
      this.$set(this.searchForm, model, "");
      //console.log(model,this.searchForm);
    },
    initSearchData(val) {
      this.searchForm = val;
    },
    //点击展开按钮
    expandChange(row, expandrow) {
      if (this.currentrow) {
        if (this.currentrow.id != row.id) {
          this.expandLoading = false;
          this.$refs.krListTable.toggleRowExpansion(this.currentrow, false);
          this.$set(this, "currentrow", row);
          this.$emit("expandRow", row);
        } else {
          //this.expandLoading = false;
          this.$set(this, "currentrow", row);
          this.$emit("expandRow", row);
          return;
        }
      }
      this.$set(this, "currentrow", row);
      this.expandLoading = true;
      this.$emit("expandRow", row);
    },
    //关闭展开行
    closeExpand() {
      this.$refs.krListTable.toggleRowExpansion({}, true);
    },
    cellClick() {},
    radioClick(row) {
      this.radioCheck = null;
    },
    //勾选所有
    selectAll(selection) {
      let data = this.$refs.krListTable.selection;
      let selected = data.length > 0 ? true : false;
      this.$emit("selectAll", selected);
    },
    //点击行
    clickChange(row) {
      if (this.currentrow) {
        if (this.currentrow.id != row.id) {
          this.$refs.krListTable.toggleRowExpansion(this.currentrow, false);
        } else {
          this.$refs.krListTable.toggleRowExpansion(row, false);
          this.currentrow = null;
          return;
        }
      }
      this.$refs.krListTable.toggleRowExpansion(row, true);
    },
    handleHeaderClass({ column }) {
      column.order = column.multiOrder;
    },
    //点击头部控制排序
    handleHeaderClick(column) {
      // if (!column.multiOrder) {
      //   column.multiOrder = "descending";
      // }else if (column.multiOrder==="descending"){
      //    column.multiOrder = "ascending";
      // }else{
      //    column.multiOrder = "";
      // }
      // this.handleOrderChange(column.property, column.multiOrder)
    },
    //改变排序字段
    handleOrderChange(prop, order) {
      const obj = {};
      let index = this.searchOrder.findIndex((item) => {
        return item.column == prop;
      });
      if (
        this.searchOrder.length == 1 &&
        (this.searchOrder[0].column == "createTime" ||
          this.searchOrder[0].column == this.defaultSort) &&
        index == -1
      ) {
        //第一个是默认的创建时间排序，或者默认排序则清空默认排序
        this.searchOrder = []; //清空默认的排序
      }
      if (index != -1) {
        switch (order) {
          case "ascending":
            this.searchOrder[index].asc = true;
            break;
          case "descending":
            this.searchOrder[index].asc = false;
            break;
          default:
            this.searchOrder.splice(index, 1);
            break;
        }
      } else {
        this.searchOrder.push({
          column: prop,
          asc: false,
        });
      }
      this.searchObj.searchMethod(this.searchForm, this.searchOrder);
    },
    sortChange({ column }) {
      if (!column.multiOrder) {
        column.multiOrder = "descending";
      } else if (column.multiOrder === "descending") {
        column.multiOrder = "ascending";
      } else {
        column.multiOrder = "";
      }
      this.handleOrderChange(column.property, column.multiOrder);
    },
    setCurrentRow(row) {
      this.$refs.krListTable.setCurrentRow(row);
    },
    //设置单选框选中数据
    radioSelect(row) {
      this.radioCheckRow = row;
      this.radioCheck = row[this.rowKey];
      this.$emit("radioSelect", row);
    },
    //获取单选数据
    getRadioData() {
      return JSON.parse(JSON.stringify(this.radioCheckRow));
    },
    //获取选中的数据
    getSelectData() {
      let arr = this.$refs.krListTable.selection;
      return JSON.parse(JSON.stringify(arr));
    },
    //清除多选
    clearSelection() {
      this.$refs.krListTable.clearSelection();
    },
    toggleRowSelection(row, select) {
      this.$refs.krListTable.toggleRowSelection(row, select);
    },
    //----------------------------start---------------------------------
    //值改变事件（除下拉框）
    inputChange(val, item) {
      this.$set(this.searchForm, item.idsStr, null);
      if (item.methods) {
        item.methods(val, this.searchForm);
      }
    },
    goSeleteOrgMember(item, type) {
      if (item.disabled) {
        return false;
      }
      this.currentItem = item;
      let value = this.searchForm[item.model] || "";
      let ids = this.searchForm[item.idsStr] || "";
      let Names = value ? value.split(",") : [];
      let Ids = ids ? ids.split(",") : [];
      let chosedData = [];
      if (["device-select", "device", ""].includes(type)) {
        this.orgMemberSelect = {
          multiple: item.multiple === undefined ? false : item.multiple, //单选还是多选
          chosedData: [],
          defaultIds: item.defaultIds === undefined ? [] : item.defaultIds,
          filterConfig:
            item.filterConfig === undefined ? [] : item.filterConfig,
          managerUnit: item.managerUnit === undefined ? [] : item.managerUnit,
          standardType:
            item.standardType === undefined ? "" : item.standardType,
          highLine: item.highLine,
          onlyHighLine: item.onlyHighLine,
        };
        Names.map((i, index) => {
          let obj = {};
          obj.id = Ids[index];
          obj.name = Names[index] || "";
          chosedData.push(obj);
        });
        this.orgMemberSelect.chosedData = chosedData;
        this.showDevice = true;
      } else if (["toolOrg"].includes(type)) {
        this.orgMemberSelect = {
          multiple: item.multiple === undefined ? false : item.multiple, //单选还是多选
          chosedData: [],
          defaultIds: item.defaultIds === undefined ? [] : item.defaultIds,
          filterConfig:
            item.filterConfig === undefined ? [] : item.filterConfig,
          managerUnit: item.managerUnit === undefined ? [] : item.managerUnit,
          standardType:
            item.standardType === undefined ? "" : item.standardType,
          highLine: item.highLine,
          onlyHighLine: item.onlyHighLine,
        };
        Names.map((i, index) => {
          let obj = {};
          obj.id = Ids[index];
          obj.name = Names[index] || "";
          chosedData.push(obj);
        });
        this.orgMemberSelect.chosedData = chosedData;
        this.showTool = true;
      } else if (type == "majorEquipment") {
        //选主要设备类型
        let id = this.searchForm[item.idsStr] || "";
        let name = this.searchForm[item.model] || "";
        this.majorEquipment = {
          equipmentId: id,
          equipmentName: id ? name : "",
          equipmentType: this.searchForm.equipmentType || "",
          disSearch: false,
          radio: true,
        };
        this.showEquipment = true;
        return;
      } else {
        this.orgMemberSelect = {
          type: type,
          multiple: item.multiple === undefined ? false : item.multiple, //单选还是多选
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          chosedData: [],
          level: item.level === undefined ? null : item.level,
          defaultOrg: item.defaultOrg === undefined ? "" : item.defaultOrg,
          defaultIds: item.defaultIds === undefined ? [] : item.defaultIds,
          permission: true,
        };
        Names.map((i, index) => {
          let obj = {};
          obj.id = Ids[index];
          obj.name = Names[index] || "";
          chosedData.push(obj);
        });
        this.orgMemberSelect.chosedData = chosedData;
        this.showUser = true;
      }
      this.dialogType = type;
    },
    //确定选择
    addSeleteMember() {
      let data = this.$refs.newMember.getSelectData();
      let names = "";
      let ids = "";
      if (data) {
        names = data
          .map((i) => {
            return i.name;
          })
          .join();
        ids = data
          .map((i) => {
            return i.id;
          })
          .join();
      }
      this.$set(this.searchForm, this.currentItem.idsStr, ids); //this.editFormData[this.currentItem.idsStr] = ids;
      this.$set(this.searchForm, this.currentItem.model, names); //this.editFormData[this.currentItem.prop] = names;
      this.showUser = false;
      this.showDevice = false;
      this.showTool = false;
      if (this.currentItem.methods) {
        this.currentItem.methods(data, this.searchForm);
      }
    },
    seleteEquipment() {
      let data = this.$refs.majorEquipment.getSeleteData();
      if (data.equipmentId) {
        this.$set(this.searchForm, this.currentItem.idsStr, data.equipmentId);
        this.$set(this.searchForm, this.currentItem.model, data.equipmentName);
      }
      this.showEquipment = false;
      if (this.currentItem.methods) {
        this.currentItem.methods(data, this.searchForm);
      }
    },
    //----------------------------end---------------------------------
    //关闭过滤器
    closeFilter() {
      this.$refs.filterBtn.$el.click();
    },
    //关闭自定义框
    closeCustom() {
      this.$refs.customBtn.$el.click();
    },
    cancelColumn() {
      //恢复为默认展示的列（展示全部列）
      this.userCustomData = [];
      this.initTableColumn();
      setTimeout(() => {
        this.adjustSize();
      }, 200);
      this.setTableConfig("column");
      this.closeCustom();
    },
    //设置自定义的选中值
    setCustomData(data) {
      let showData = [];
      this.userCustomData = [];
      for (let i in this.column) {
        let name = this.column[i].label;
        if (data.includes(name)) {
          showData.push(this.column[i]);
          this.userCustomData.push(name);
        }
      }
      this.showCustomData = showData;
    },
    //提交自定义框
    submitCustom(data) {
      this.setCustomData(data); 
      this.$refs.customBtn.$el.click();
      this.setTableConfig("column");
      //this.getTableConfig();
      this.$refs.krListTable.doLayout();
      //this.adjustSize();
    },
    //设为默认值
    setDefaultConfig(data) {
      this.setCustomData(data);
      //this.adjustSize();
      //this.$refs.customBtn.$el.click();
      this.setTableConfig("column", true);
      //this.$refs.krListTable.doLayout();
    },
    //删除表格配置
    deleteTableConfig() {
      if (this.columnObj.id) {
        let param = { id: this.columnObj.id };
        deleteTableConfigApi(param).then((res) => {
          this.$message.success(res.description);
          this.getTableConfig();
          this.adjustSize();
        });
      } else {
        this.$message.warning("当前自定义列为默认值,无法重置");
      }
    },
    //重置过滤器
    resetFilter() {
      this.filterData = this.setfilterData();
      if (!this.isEmptyObj(this.defaultFilterData)) {
        //当过滤器默认值不为空
        this.filterData = Object.assign(
          this.filterData,
          this.defaultFilterData
        );
        //对查询框也要进行赋值
        let defaultQueryData = this.filterDataChange(this.defaultFilterData);
        this.searchForm = Object.assign(
          {},
          this.defaultQuery,
          defaultQueryData
        );
      } else {
        this.searchForm = Object.assign(
          {
            page: 1,
            pageSize: 15,
          },
          this.defaultQuery
        );
      }
      this.setTableConfig("filter");
      this.searchData();
      this.closeFilter();
    },
    //取出过滤器中对象的数值,并且与searchObj.searchArr条件进行整合
    filterDataChange(data) {
      if (data) {
        let searchArr = this.searchObj.searchArr;
        let searchList = [],
          searchHaveId = [],
          searchIdObj = [],
          selectArr = [];
        searchArr.map((i) => {
          if (i.idsStr) {
            //区分查询条件是否有id的值
            searchHaveId.push({
              model: i.model,
              idsStr: i.idsStr,
            });
            searchIdObj[i.model] = i.idsStr;
          } else {
            searchList.push(i.model);
          }
          if (i.type == "select") {
            selectArr.push(i.model);
          }
        });
        searchList.map((j) => {
          //新加了查询条件时，把新加项加上
          if (data[j] == undefined) {
            let form = {
              enable: true,
              value: null,
            };
            data[j] = form;
          }
        });
        searchHaveId.map((j) => {
          let name = j.model;
          let idsStr = j.idsStr;
          //新加了查询条件时，把新加项加上
          if (data[name] == undefined) {
            let form = {
              enable: true,
              value: null,
              name: null,
            };
            data[j] = form;
          }
        });
        let searchData = {};
        for (let i in data) {
          searchData[i] = data[i].name || data[i].value || null;
          if (
            data[i].name &&
            !this.isArry(data[i].name) &&
            !selectArr.includes(i)
          ) {
            //排除掉下拉框的情况
            //查询条件含ID
            searchData[i] = data[i].name || null;
            if (searchIdObj[i]) {
              searchData[searchIdObj[i]] = data[i].value || null;
            }
          } else {
            searchData[i] = data[i].value || null;
          }
        }
        return searchData;
      }
    },
    //将查询条件设置过滤器的值
    setfilterData() {
      let filter = {};
      if (this.searchObj.searchArr.length) {
        this.searchObj.searchArr.map((i) => {
          let obj = {
            value: null,
            enable: true,
          };
          filter[i.model] = obj;
        });
      }
      return filter;
    },
    //将查询条件保存过滤器
    saveFilter() {
      for (let i in this.filterData) {
        this.filterData[i].value = this.searchForm[i];
      }
      this.setTableConfig("filter");
      this.closeFilter();
    },
    //过滤器条件拖拽功能
    dragstart(value) {
      this.oldData = value;
    },

    // 记录移动过程中信息
    dragenter(value, e) {
      this.newData = value;
      e.preventDefault();
    },
    // 拖拽最终操作
    dragend(value, e) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.searchObj.searchArr.indexOf(this.oldData);
        let newIndex = this.searchObj.searchArr.indexOf(this.newData);
        let newItems = [...this.searchObj.searchArr];
        // 删除老的节点
        newItems.splice(oldIndex, 1);
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData);
        this.searchObj.searchArr = [...newItems];
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover(e) {
      e.preventDefault();
    },
    //搜索条件的展示与隐藏
    changeEnable() {
      // this.setTableConfig("filter");
    },
  },
};
</script>

<style lang="less" scoped>
.kr-list-table-box {
  min-width: 500px;
  width: 100%;
  height: 100%;
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    //background-color: rgba(44, 119, 244, 0.2); //@kr-hover-row-bgcolor
    background-color: @kr-hover-row-bgcolor;
  }
}
/deep/.el-pagination__sizes .el-input .el-input__inner {
  height: 28px;
}
/deep/.el-pagination .el-select .el-input .el-input__inner {
  border-radius: 4px;
}
/deep/.el-pagination__sizes .el-input .el-input__inner {
  border: 1px solid #cccccc; //1px solid #999999
}
/deep/.el-pagination__sizes .el-input .el-input__inner:hover {
  border: 1px solid #0d60b4; //1px solid #999999
}
/deep/.el-pagination .el-select .el-input:hover {
  border: 1px solid #fff; //1px solid transparent !important;
  border-radius: 4px;
}
/deep/.el-pagination__editor.el-input input:hover {
  border: 1px solid #0d60b4;
}
/deep/.el-table .el-table__header-wrapper td,
/deep/.el-table .el-table__header-wrapper th,
/deep/.el-table th,
/deep/ .el-table tr {
  height: 40px;
}
/deep/ .el-table .cell {
  word-break: normal;
}
// /deep/.el-table__body-wrapper{
//   height: calc(100% - 40px) !important;
// }
// /deep/ .el-table__fixed-body-wrapper {
//   top: 40px !important;
// }
.header--btnOverflow {
  display: block;
  position: relative;
}
.header--btnNoOver {
  display: flex;
  position: relative;
  justify-content: space-between;
  margin-bottom: 16px;
  //border-bottom: 1px solid #ccc;
}
.list-table-search {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.underline {
  border-bottom: 1px solid @kr-border-sub-color;
  height: 1px;
  width: 100%;
}
.list-table-search .search-up-down--btn {
  width: 100px;
  height: 22px;
  line-height: 22px;
  background: #eeeeee;
  border-radius: 0px 0px 8px 8px;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: -22px;
  cursor: pointer;
  transform: translateX(-50%);
  /* width: 56px;
  height: 14px;
  line-height: 8px;
  text-align: center;
  position: absolute;
  cursor: pointer;
  box-sizing: border-box;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  bottom: -14px;
  left: 50%;
  border-radius: 5px;
  transform: translateX(-50%);
  border: 1px solid #cccccc; */
  /* i {
    line-height: 14px;
  } */
  .icon-span--btn {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 1px solid #999;
    display: inline-block;
    line-height: 16px;
    color: #666;
  }
  .text-span {
    font-size: 12px;
    color: #666;
    padding-left: 6px;
  }
}
.search--btnOverflow {
  //margin-bottom: 12px;
  margin-bottom: 22px;
  //border-bottom: 1px solid @kr-border-sub-color;
  position: relative;
}
.list-table-search--item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-right: 10px;
}
.list-table-search--item .item-label {
  width: @kr-list-input-label-width;
  padding-right: 10px;
  display: inline-block;
  //text-align: justify;
  text-align: right;
  line-height: 28px;
  //text-align-last: justify;
  word-break: keep-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list-table-search--item .item-input {
  width: @kr-list-input-width;
}
.list-table-search--item .search-btn {
  margin-left: 20px;
  color: #fff;
  // width: @kr-btn-min-width;
  background-color: @kr-selected-color;
  border-color: @kr-selected-color;
}
.table-search--action {
  flex: 1;
  text-align: right;
  min-width: 205px;
  position: relative;
  .leftAction {
    height: 100%;
    position: absolute;
    left: 0;
    top: 5px;
  }
}
.el-dropdown .el-icon-plus {
  margin-right: 5px !important;
}

.el-dropdown + .popoverActionBtn {
  //margin-left: 10px;
}
.table-action-btn + .popoverActionBtn {
  margin-left: 10px;
}
.popoverActionBtn {
  margin: 0px 5px;
}
.table-search--action .table-action-btn {
  min-width: @kr-btn-min-width;
}
.list-table-main .el-table {
  font-size: 14px;
  width: 100%;
}
.kr-list-table-box .kr-table-pagination {
  height: 40px;
  padding-top: 16px;
  text-align: right;
  //padding-right: 10px;
}
.blockContent {
  max-height: 500px;
  .itemContent {
    height: calc(100% - 80px);
    overflow: auto;
  }
  .blockTop {
    margin: 10px 0px;
  }
  .blockTitle {
    font-size: 16px;
    font-weight: bolder;
  }
  .blockItem {
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
  }
  .blockItemTop {
    margin-bottom: 10px;
  }
  .blockItem + .blockItem {
    margin-top: 15px;
  }
  .contentValue {
    padding: 5px 15px;
    border-radius: 15px;
    background-color: #ececec;
    margin: 10px 0px;
  }
  .contentValue + .contentValue {
    margin-left: 10px;
  }
  .blockItemContent {
    line-height: 30px;
  }
  .bottomBtn {
    margin-top: 10px;
  }
  .bottomBtnItem {
    width: 50%;
  }
  .checkNum {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .checkContent {
    margin: 10px 0px;
    padding: 10px;
    border: 1px solid #e4e4e4;
    overflow: auto;
  }
  .el-checkbox {
    line-height: 30px;
  }
  .closeBtn {
    font-size: 16px;
    font-weight: bolder;
  }
  .closeBtn:hover {
    cursor: pointer;
  }
}
.table-cloumn__span--tooltip {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flexColumnNo {
  display: flex;
  flex-flow: column nowrap;
}
.flexWrapNo {
  display: flex;
  flex-flow: wrap nowrap;
  justify-content: space-between;
}
.oneLine {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
